<template>
  <div style="background: black">
    <p class="asdfads">{{ typeText }}</p>

    <!-- <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="star"
      :particleSize="4"
      linesColor="#FFFFFF"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles> -->
  </div>
</template>

<script>
// color: String类型。默认'#dedede'。粒子颜色。
// particleOpacity: Number类型。默认0.7。粒子透明度。
// particlesNumber: Number类型。默认80。粒子数量。
// shapeType: String类型。默认'circle'。可用的粒子外观类型有："circle","edge","triangle", "polygon","star"。
// particleSize: Number类型。默认80。单个粒子大小。
// linesColor: String类型。默认'#dedede'。线条颜色。
// linesWidth: Number类型。默认1。线条宽度。
// lineLinked: 布尔类型。默认true。连接线是否可用。
// lineOpacity: Number类型。默认0.4。线条透明度。
// linesDistance: Number类型。默认150。线条距离。
// moveSpeed: Number类型。默认3。粒子运动速度。
// hoverEffect: 布尔类型。默认true。是否有hover特效。
// hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
// clickEffect: 布尔类型。默认true。是否有click特效。
// clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"
export default {
  name: "",
  components: {}, //组件
  data() {
    return {
      text: "这是要显示的文本内容。",
      typeText: "",
      index: 0,
      typingSpeed: 200, // 打字速度，单位毫秒
      pauseSpeed: 1000, // 暂停速度，单位毫秒
    };
  },
  created() {
    setTimeout(() => {
      this.type();
    }, 5000);
  },
  mounted() {},
  methods: {
    type() {
      if (this.index < this.text.length) {
        // 打字
        this.typeText += this.text[this.index++];
        setTimeout(this.type, this.typingSpeed);
      } else {
        // 暂停
        setTimeout(() => {
          // 继续打字或结束
          if (this.index > this.text.length) {
            // 清除定时器
            clearTimeout();
          } else {
            this.typeText = this.text.substring(0, this.index - 1);
            setTimeout(this.type, this.pauseSpeed);
          }
        }, this.pauseSpeed);
      }
    },
  },
  computed: {},
};
</script>
<style scoped lang='less'>
@font-face {
  font-family: "QiShuHand";
  //   src: url("QishuHand.ttf") format("truetype");
}

.qishu {
  font-family: "QiShuHand";
  font-size: 100px;
  color: #e89f5b;
  position: relative;
}

.qishu::before,
.qishu::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  color: #ffcdb2;
  background: #e89f5b;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
  animation: slide 5s infinite alternate ease-in-out;
}

.qishu::before {
  animation-delay: -2.5s;
}

@keyframes slide {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
  }
  to {
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
  }
}
.asdfads {
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 26px;
  color: #eff8fc;
  text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);
  // position: absolute;
  // top: 40%;
  // z-index: 100;
  // left: 20%;
}
</style>
